<template>
  <div class="mod-config">
    <el-form ref="form" :inline="true" label-width="80px">
      <el-form-item width="400px">
        <el-input placeholder="输入名称搜索相关内容" v-model="condition" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="yearsValue" placeholder="请选择年代" clearable>
          <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="styleValue" placeholder="请选择书体" clearable>
          <el-option v-for="item in styleOptions" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="calligrapherValue" placeholder="请选择书家" clearable>
          <el-option v-for="item in calligrapherOptions" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-upload
          action="http://121.41.167.195:8089/renren-fast/sf/copyingSteleCalligraphy/calligraphyResource/upload"
          :accept="'application/zip'"
          :before-upload="beforeZipUpload"
          :on-success="handleZipSuccess"
          :on-error="handleZipError"
          name="copybookResourceZip"
          :show-file-list="false">
          <el-button slot="trigger" type="primary">批量资源上传</el-button>
        </el-upload>
      </el-form-item>
      <el-button type="primary" @click="openRubbingsDialog()">添加碑帖</el-button>
      <el-button type="info" @click="downtemplate()">下载资源模板</el-button>
      <el-button type="danger" v-show="showMoveBtn" @click="multipledeleteHandle">批量删除碑帖</el-button>
      <el-button type="danger" v-show="showMoveBtn_page" @click="multipledeleteHandle_page">批量删除单页</el-button>
    </el-form>

    <el-table :data="dataList" stripe v-loading="dataListLoading" style="width: 100%"
      @selection-change="handleSelectionChange" @expand-change="expandSelect" :row-key='getRowKeys' :expand-row-keys="expands">
      <el-table-column prop="" type="selection" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table label-position="left" :data="props.row.singlepageList" inline class="demo-table-expand"
            @selection-change="handlePageSelectionChange">
            <el-table-column prop="" type="selection" />
            <el-table-column label="单页id" prop="id"></el-table-column>
            <el-table-column label="单页名称" prop="steleCalligraphySinglepageName"></el-table-column>
            <el-table-column label="单页封面" align="center">
              <template slot-scope="scope">
                <el-image :src="scope.row.steleCalligraphySinglepage" lazy>
                  <div slot="placeholder" class="image-slot">
                    <i class="el-icon-loading"></i>加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="sorder" label="顺序" show-overflow-tooltip> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" slot="reference" size="small" @click="AddRubbingZi(scope.row)">增加碑帖字</el-button>
                <el-button type="text" slot="reference" size="small" @click="upatePage(scope.row)">修改单页</el-button>
                <el-button type="text" size="small" @click="deletePageHandle(scope.row)">删除单页</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="碑帖id" width="200"></el-table-column>
      <el-table-column prop="steleCalligraphyName" width="160" label="碑帖名称"></el-table-column>
      <el-table-column prop="steleCalligraphyThumbnail" width="150" label="碑帖封面">
        <template slot-scope="scope">
          <i v-show="isLoading" class="el-icon-loading"></i>
          <el-image v-show="!isLoading" :src="scope.row.steleCalligraphyThumbnail" @load="handleImgLoad()">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="calligraphyIntroduction" label="碑帖简介" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="calligrapherIntroduction" label="书家介绍" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="sorder" label="顺序" show-overflow-tooltip> </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="AddPage(scope.row)">添加单页</el-button>
          </el-button>
          <el-button type="text" size="small" @click="modifyRubbing(scope.row)">修改碑帖</el-button>
          </el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除碑帖</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 新增碑帖模态框 -->
    <el-dialog :title=isStatusName :visible.sync="dialogRubbingVisible" width="1000px" destroy-on-close
      v-loading="dialogLoading">
      <el-form :model="rubbingDataForm" ref="rubbingForm" :rules="rules" @keyup.enter.native="dataFormSubmit()"
        label-width="100px">
        <el-form-item label="碑帖封面" prop="steleCalligraphySrc">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm"
              :on-success="handleAvatarSuccess" :on-remove="handleRemove" :limit=1 :before-upload="beforeAvatarUpload"
              :on-exceed="exceedPic">
              <img v-if="imageUrl" :src="rubbingDataForm.steleCalligraphySrc" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
            </el-upload>
            <i v-if="imageUrl" class="el-icon-delete delIcon" @click.stop="delPic()" />
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="碑帖名称" prop="steleCalligraphyName">
          <el-input v-model="rubbingDataForm.steleCalligraphyName"></el-input>
        </el-form-item>
        <el-form-item label="碑帖简介" prop="calligraphyIntro">
          <el-input type="textarea" v-model="rubbingDataForm.calligraphyIntro"></el-input>
        </el-form-item>
        <el-form-item label="书家介绍" prop="calligrapherIntro">
          <el-input type="textarea" v-model="rubbingDataForm.calligrapherIntro"></el-input>
        </el-form-item>
        <el-form-item label="年代" prop="yid">
          <el-select v-model="rubbingDataForm.yid" placeholder="请选择年代">
            <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书体" prop="sid">
          <el-select v-model="rubbingDataForm.sid" placeholder="请选择书体">
            <el-option v-for="item in styleOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书家" prop="cid">
          <el-select v-model="rubbingDataForm.cid" placeholder="请选择书家">
            <el-option v-for="item in calligrapherOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序" prop="order">
          <el-input-number v-model="rubbingDataForm.order" :min="1" :max="100" :precision="0" label="描述文字">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd()">取 消</el-button>
        <el-button type="primary" @click="doAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增单页模态框 -->
    <el-dialog :title=isStatusName :visible.sync="dialogPageVisible" width="1000px" destroy-on-close
      v-loading="dialogLoading">
      <el-form :model="pageDataForm" ref="pageForm" :rules="rules" @keyup.enter.native="dataFormSubmit()"
        label-width="120px">
        <el-form-item label="碑帖单页封面" prop="steleCalligraphySinglepage">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm"
              :on-success="handlePageAvatarSuccess" :on-remove="handlePageRemove" :limit=1
              :before-upload="beforePageAvatarUpload" :on-exceed="exceedPic" >
              <img v-if="imageUrl" :src="pageDataForm.steleCalligraphySinglepage" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
            </el-upload>
            <i v-if="imageUrl" class="el-icon-delete delIcon" @click.stop="delPic()" />
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="碑帖单页名称" prop="steleCalligraphySinglepageName">
          <el-input v-model="pageDataForm.steleCalligraphySinglepageName"></el-input>
        </el-form-item>
        <el-form-item label="顺序" prop="sorder">
          <el-input-number v-model="pageDataForm.sorder" :min="1" :max="100" :precision="0" label="描述文字">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddPage()">取 消</el-button>
        <el-button type="primary" @click="doAddPage()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增碑帖字模态框 -->
    <el-dialog title="碑帖字管理" :visible.sync="dialogRubbingZiVisible" width="1000px" destroy-on-close
      v-loading="dialogLoading">
      <div class="itemContent" style="max-height: 730px; overflow-y: auto;">
        <draggable v-model="productForm.productPicList" class="list-group" tag="ul" v-bind="dragOptions"
          @start="productForm.drag = true" @end="productForm.drag = false">
          <div v-for="(item,index) in productForm.productPicList" :key="index" v-loading="productForm.loadingapp"
            class="listitem" @mouseenter="showDelBtn(index)" @mouseleave="hiddenDelBtn">
            <i v-show="isLoading3" class="el-icon-loading listitemofi" style="font-size: 30px;"></i>
            <el-image v-show="!isLoading3" :src="item" width="148" height="148" class="imgSty"
              @load="handleImgLoad3()" />
            <i v-show="index==productForm.currentDelBtn" class="el-icon-delete delIcon" @click="deleImg(item,index)" />
          </div>
        </draggable>
        <div class="uploadIcon">
          <el-upload :show-file-list="false" action="http://121.41.167.195:8000/api/oss/upload" list-type="picture-card"
            :on-success="handlePictureSuccess" class="avatar" multiple>
            <i class="el-icon-plus" />
          </el-upload>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddZi()">取 消</el-button>
        <el-button type="primary" @click="doAddZi()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import draggable from "vuedraggable";
  export default {
    data() {
      return {
        tab: 1,
        dataList: null,

        DataForm: {
          id: null,
          name: '',
          years: '',
          style: '',
          name: '',
          num: 1,
        },
        isAdd: true,
        tag: 'years',

        condition: '',
        yearsValue: null,
        styleValue: null,
        calligrapherValue: null,
        yearsOptions: null,
        styleOptions: null,
        calligrapherOptions: null,

        dialogRubbingVisible: false,
        dialogPageVisible: false,
        dialogLoading: false,
        dialogImageUrl: '',
        dialogVisible: false,
        imageUrl: null,
        rubbingDataForm: {
          steleCalligraphySrc: null,
          steleCalligraphyName: '',
          calligraphyIntro: '',
          calligrapherIntro: '',
          yid: null,
          sid: null,
          cid: null,
          order: 1
        },
        pageDataForm: {
          steleCalligraphySinglepageName: '',
          steleCalligraphySinglepage: null,
          sid: null,
          sorder: 1
        },
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        isLoading: true,
        isLoading3: true,
        rules: {
          steleCalligraphySrc: [{
            required: true,
            message: '请上传碑帖封面',
            trigger: 'change'
          }],
          steleCalligraphyName: [{
            required: true,
            message: '请输入碑帖名称',
            trigger: 'change'
          }],
          calligraphyIntro: [{
            required: true,
            message: '请输入碑帖简介',
            trigger: 'change'
          }],
          calligrapherIntro: [{
            required: true,
            message: '请输入书家介绍',
            trigger: 'change'
          }],
          yid: [{
            required: true,
            message: '请选择年代',
            trigger: 'change'
          }],
          sid: [{
            required: true,
            message: '请选择书体',
            trigger: 'change'
          }],
          cid: [{
            required: true,
            message: '请选择书家',
            trigger: 'change'
          }],
          steleCalligraphySinglepageName: [{
            required: true,
            message: '请输入单页碑帖名称',
            trigger: 'change'
          }],
          steleCalligraphySinglepage: [{
            required: true,
            message: '请上传碑帖封面',
            trigger: 'change'
          }],
        },

        productForm: {
          productPicList: [],
          currentDelBtn: -1,
          loadingapp: false,
          drag: false
        },
        dialogRubbingZiVisible: false,
        showMoveBtn: false,
        showMoveBtn_page:false,
        expands: [], //只展开一行放入当前行id
        getRowKeys(row) { //设置row-key只展示一行
          return row.id
        },
      }
    },
    components: {
      draggable
    },
    created() {
      this.getRubbingDataList()
      this.getDataListById(1)
      this.getDataListById(2)
      this.getDataListById(3)
    },
    watch: {
      yearsValue: {
        handler(newValue, OldValue) {
          this.getRubbingDataList()
          this.pageIndex = 1
        }
      },
      styleValue: {
        handler(newValue, OldValue) {
          this.getRubbingDataList()
          this.pageIndex = 1
        }
      },
      calligrapherValue: {
        handler(newValue, OldValue) {
          this.getRubbingDataList()
          this.pageIndex = 1
        }
      },
      condition: {
        handler(newValue, OldValue) {
          this.getRubbingDataList()
          this.pageIndex = 1
        }
      },
      dialogRubbingVisible: {
        handler(newValue, OldValue) {
          this.rubbingDataForm = {
            steleCalligraphySrc: null,
            steleCalligraphyName: '',
            calligraphyIntro: '',
            calligrapherIntro: '',
            yid: null,
            sid: null,
            cid: null,
            order: 1
          }
          this.imageUrl = null
        }
      },
      dialogPageVisible: {
        handler(newValue, OldValue) {
          this.pageDataForm.steleCalligraphySinglepageName = ''
          this.pageDataForm.steleCalligraphySinglepage = null
          this.pageDataForm.sorder = 1
          this.imageUrl = null
        }
      },

    },
    computed: {
      isStatusName: function() {
        if (this.isAdd) {
          return '新增'
        } else {
          return '修改'
        }
      },
      dragOptions() {
        return {
          animation: 200,
          group: "description",
          disabled: false,
          ghostClass: "ghost"
        };
      }
    },
    methods: {
      // --------------------这是碑帖代码----------------------------
      // 获取碑帖列表
      getRubbingDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecalligraphy/list"),
          method: "get",
          params: this.$http.adornParams({
            condition: this.condition,
            years: this.yearsValue,
            style: this.styleValue,
            calligrapher: this.calligrapherValue,
            curPage: this.pageIndex,
            pageSize: this.pageSize,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.data.record;
            this.totalPage = data.data.total;
          } else {
            this.$message.error(data.message);
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
          this.multipleSelection = []
          this.multipleSelection_page=[]
        });
      },
      // 根据id获取书体 书家 年代列表
      getDataListById(type) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/ysc/get"),
          method: "get",
          params: this.$http.adornParams({
            type: type,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            switch (type) {
              case 1:
                this.yearsOptions = data.data.map((item) => {
                  return {
                    value: item.id,
                    label: item.years
                  }
                })
                break;
              case 2:
                this.styleOptions = data.data.map((item) => {
                  return {
                    value: item.id,
                    label: item.style
                  }
                })
                break;
              case 3:
                this.calligrapherOptions = data.data.map((item) => {
                  return {
                    value: item.id,
                    label: item.name
                  }
                })
                break;
            }

          } else {
            this.$message.error(data.message);
            this.yearsOptions = []
          }
          this.dataListLoading = false;
        });
      },
      // 新增 -- 打开碑帖框
      openRubbingsDialog() {
        this.getDataListById(1)
        this.getDataListById(2)
        this.getDataListById(3)
        this.dialogRubbingVisible = true
        this.isAdd = true
        // this.rubbingDataForm = {
        //   steleCalligraphySrc: null,
        //   steleCalligraphyName: '',
        //   calligraphyIntro: '',
        //   calligrapherIntro: '',
        //   yid: null,
        //   sid: null,
        //   cid: null,
        //   order: 1
        // }
      },
      // ================上传碑帖封面================
      handleAvatarSuccess(res, file) {
        this.dialogLoading = false
        this.imageUrl = res.url;
        this.rubbingDataForm.steleCalligraphySrc = res.url;
      },
      beforeAvatarUpload(file) {
        this.dialogLoading = true
        const isJPG = file.type === 'image/jpeg' || 'png';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或PNG格式!');
          this.dialogLoading = false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
          this.dialogLoading = false
        }

        return isJPG && isLt2M;
      },
      // 删除图片
      handleRemove(file, fileList) {
        this.rubbingDataForm.steleCalligraphySrc = null
        this.imageUrl = null
      },

      // ================上传碑帖单页封面================
      handlePageAvatarSuccess(res, file) {
        this.dialogLoading = false
        this.imageUrl = res.url;
        this.pageDataForm.steleCalligraphySinglepage = res.url;
      },
      beforePageAvatarUpload(file) {
        this.dialogLoading = true
        const isJPG = file.type === 'image/jpeg' || 'png';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或PNG格式!');
          this.dialogLoading = false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
          this.dialogLoading = false
        }

        return isJPG && isLt2M;
      },
      // 删除图片
      handlePageRemove(file, fileList) {
        this.pageDataForm.steleCalligraphySinglepage = null
        this.imageUrl = null
      },


      // 上传超出数量
      exceedPic() {
        this.$message.error('只能上传一张封面')
      },
      // 年代书法框--取消按钮
      cancelAdd() {
        this.isLoading3 = true
        this.dialogRubbingVisible = false
      },
      // 碑帖模态框--提交确定按钮
      doAdd() {
        this.$refs['rubbingForm'].validate((valid) => {
          if (valid) {
            this.dialogLoading = true
            this.$http({
              url: this.$http.adornUrl(
                `/sf/copyingSteleCalligraphy/stelecalligraphy/${this.isAdd?"save":"update"}`),
              method: "post",
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: this.$http.adornData({
                id: this.rubbingDataForm.id,
                steleCalligraphySrc: this.rubbingDataForm.steleCalligraphySrc,
                steleCalligraphyName: this.rubbingDataForm.steleCalligraphyName,
                calligraphyIntro: this.rubbingDataForm.calligraphyIntro,
                calligrapherIntro: this.rubbingDataForm.calligrapherIntro,
                yid: this.rubbingDataForm.yid,
                sid: this.rubbingDataForm.sid,
                cid: this.rubbingDataForm.cid,
                order: this.rubbingDataForm.order,
              }, true, 'form')
            }).then(({
              data
            }) => {
              this.dialogLoading = false
              if (data && data.code === 0 && data.success == true) {

                this.$message({
                  message: `${this.isAdd?'新增成功':'更新成功'}`,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.dialogRubbingVisible = false

                    this.getRubbingDataList()
                  },
                });
              } else {
                this.$message.error(data.message);
              }
            });
          } else {
            this.dataListLoading = false
            console.log('error submit!!')
            return false
          }
        })

      },
      //单页模态框--提交确定按钮
      doAddPage() {
        this.$refs['pageForm'].validate((valid) => {
          if (valid) {
            this.dialogLoading = true
            this.$http({
              url: this.$http.adornUrl(
                `/sf/copyingSteleCalligraphy/stelecalligraphysinglepage/${this.isAdd?"save":"update"}`),
              method: "post",
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: this.$http.adornData({
                ...this.pageDataForm,
                sid: this.pageDataForm.sid
              }, true, 'form')
            }).then(({
              data
            }) => {
              this.dialogLoading = false
              if (data && data.code === 0 && data.success == true) {

                this.$message({
                  message: `${this.isAdd?'新增成功':'更新成功'}`,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.dialogPageVisible = false

                    this.getRubbingDataList()
                  },
                });
              } else {
                this.$message.error(data.message);
              }
            });
          } else {
            this.dataListLoading = false
            console.log('error submit!!')
            return false
          }
        })
      },
      // 修改--打开碑帖框
      modifyRubbing(row) {
        this.dialogRubbingVisible = true
        this.$nextTick(() => {
          this.isAdd = false
          this.imageUrl = row.steleCalligraphy;
          let yid = ''
          let cid = ''
          let sid = ''
          // 遍历下拉框的选项，寻找需要选中的选项
          for (let i = 0; i < this.yearsOptions.length; i++) {
            if (this.yearsOptions[i].label == row.years) { // 假设需要选中的是“选项2”
              yid = this.yearsOptions[i].value; // 将选项2的value设置为v-model绑定的值
              break;
            }
          }
          // 遍历下拉框的选项，寻找需要选中的选项
          for (let i = 0; i < this.styleOptions.length; i++) {
            if (this.styleOptions[i].label == row.style) { // 假设需要选中的是“选项2”
              sid = this.styleOptions[i].value; // 将选项2的value设置为v-model绑定的值
              break;
            }
          }
          // 遍历下拉框的选项，寻找需要选中的选项
          for (let i = 0; i < this.calligrapherOptions.length; i++) {
            if (this.calligrapherOptions[i].label == row.calligrapher) { // 假设需要选中的是“选项2”
              cid = this.calligrapherOptions[i].value; // 将选项2的value设置为v-model绑定的值
              break;
            }
          }
          this.rubbingDataForm = {
            id: row.id,
            steleCalligraphySrc: row.steleCalligraphy,
            steleCalligraphyName: row.steleCalligraphyName,
            calligraphyIntro: row.calligrapherIntroduction,
            calligrapherIntro: row.calligrapherIntroduction,
            yid: yid,
            sid: sid,
            cid: cid,
            order: row.sorder
          }
          console.log(this.rubbingDataForm)
        })
      },
      // 修改--打开单页框
      upatePage(row) {
        this.dialogPageVisible = true
        this.$nextTick(() => {
          this.isAdd = false
          this.imageUrl = row.steleCalligraphySinglepage;
          this.pageDataForm = {
            ...row
          }
        })
      },

      // 删除
      deleteHandle(row) {
        this.$confirm(`确定对id[${row.id}]进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecalligraphy/delete"),
              method: "post",
              data: this.$http.adornData([row.id], false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getRubbingDataList()
                  },
                });
              } else {
                this.dataListLoading = false
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // 添加单页
      AddPage(row) {
        this.pageDataForm.sid = row.id
        this.dialogPageVisible = true
      },
      // 关闭碑帖单页弹框
      cancelAddPage() {
        this.dialogPageVisible = false
      },
      // --------------------这是碑帖字代码----------------------------
      // 打开碑帖字弹框
      AddRubbingZi(row) {
        this.rubbingDataForm.id = row.id
        this.dialogRubbingZiVisible = true
        this.$http({
          url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecallicharacter/list"),

          method: "POST",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: this.$http.adornData({
            sid: row.id
          }, true, 'form')
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.productForm.productPicList = data.data.map(item => item.steleCalligraphyCharacter);
          } else {
            his.$message.error(data.message);
          }
          this.dataListLoading = false;
        });

      },
      // 关闭碑帖字弹框
      cancelAddZi() {
        this.dialogRubbingZiVisible = false
      },
      //碑帖字模态框---提交确定按钮
      doAddZi() {
        this.dialogLoading = true
        let dataArray = this.productForm.productPicList.map(item => {
          return {
            sid: this.rubbingDataForm.id,
            steleCalligraphyCharacter: item
          }
        })
        this.$http({
          url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecallicharacter/updatesave"),
          method: "post",
          data: {"sid":this.rubbingDataForm.id,"steleCalligraphyCaracterVoList":dataArray}
        }).then(({
          data
        }) => {
          this.dialogLoading = false
          if (data && data.code === 0 && data.success == true) {

            this.$message({
              message: "更新成功",
              type: "success",
              duration: 1000,
              onClose: () => {
                this.dialogRubbingZiVisible = false
                this.getRubbingDataList()
              },
            });
          } else {
            this.$message.error(data.message);
          }
        });
      },
      // 图片未渲染加载
      handleImgLoad() {
        this.isLoading = false
      },
      // 图片未渲染加载
      handleImgLoad3() {
        this.isLoading3 = false
      },
      //显示删除图片的图标
      showDelBtn(index) {
        console.log(index)
        this.productForm.currentDelBtn = index
      },
      //隐藏删除图片的图标
      hiddenDelBtn() {
        this.productForm.currentDelBtn = -1
      },
      // 删除图片
      deleImg(data, index) {
        this.productForm.productPicList.splice(index, 1)
      },
      //图片上传成功之后的校验：
      // 最多只能上传5张、必须是1：1的 ；不能超过100k
      //这里为什么没有用el-upload自带图片上传之前的验证before-upload 呢 因为 一但上传了失败的图片以前上传的所有图片都不显示了 （目前不太清楚原因）
      //以下函数 里为什么一直用的 是file 而不是fileList  因为涉及到了编辑回显，如果没有编辑回显可以直接用fileList这个参数来处理代码逻辑；
      handlePictureSuccess(response, file, fileList) {
        console.log(file)
        const isJPG = file.raw.type === 'image/jpeg';
        const isJPG2 = file.raw.type === 'image/jpg';
        const isPNG = file.raw.type === 'image/png';
        const isGIF = file.raw.type === 'image/gif';
        const isLt5M = file.raw.size / 1024/ 1024 < 100;
        // const isSize = this.imgSize(file)
        if (!isJPG && !isJPG2 && !isPNG && !isGIF) {
          this.$message.warning('只支持jpg或png或gif格式图片');
          return
        }
        if (!isLt5M) {
          this.$message.warning('图片须小于100M!');
          return
        }


        this.productForm.productPicList.push(file.response.url)
        return file.raw;


      },
      delPic() {
        this.$refs.uploadForm.clearFiles()
        this.rubbingDataForm.steleCalligraphySrc = null
        this.imageUrl = null
      },
      // --------------------这是分页公共代码----------------------------
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getRubbingDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getRubbingDataList()
      },


      // 点击多选框事件
      handleSelectionChange(val) {
        this.showMoveBtn = val.length != 0
        this.multipleSelection = val
      },
      // 删除多个碑帖
      multipledeleteHandle() {
        const ids = []
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
        this.$confirm(`确定对这些进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecalligraphy/delete"),
              method: "post",
              data: this.$http.adornData(ids, false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getRubbingDataList()
                  },
                });
              } else {
                this.getRubbingDataList()
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // 删除单页
      deletePageHandle(row) {
        this.$confirm(`确定对id[${row.id}]进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecalligraphysinglepage/delete"),
              method: "post",
              data: this.$http.adornData([row.id], false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getRubbingDataList()
                  },
                });
              } else {
                this.dataListLoading = false
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // 删除多个单页
      multipledeleteHandle_page() {
        const ids = []
        this.multipleSelection_page.forEach(item => {
          ids.push(item.id)
        })
        this.$confirm(`确定对这些进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecalligraphysinglepage/delete"),
              method: "post",
              data: this.$http.adornData(ids, false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getRubbingDataList()
                    this.showMoveBtn_page = false
                  },
                });
              } else {
                this.getRubbingDataList()
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      //点击单页多选框效果
      handlePageSelectionChange(val){
        this.showMoveBtn_page = val.length != 0
        this.multipleSelection_page = val
      },
      // 展开行变化时触发
      expandSelect(row, expandedRows) {
        //加载前先将上次的数据模型情况，不然会出现点击展开嵌套表格后，先显示上一次的数据，然后渲染这次的数据。
        this.observe = [];
        //只展开一行
        if (expandedRows.length) { //说明展开了
          this.expands = [];
          if (row) {
            this.expands.push(row.id); //只展开当前行id
          }
        } else { //说明收起了
          this.expands = [];
        }
      },
      // 下载资源模板
      downtemplate(){
        // 创建一个 <a> 元素
        this.$message.info('资源下载中')
        const link = document.createElement('a');
        link.href = 'https://anhuihanzhi-shufa-client.oss-cn-hangzhou.aliyuncs.com/2023/07/29f3c7f15fb89145f88e4f597cd67de86a碑帖资源模板.zip'; // 替换为你的 ZIP 文件的路径

        // 设置下载的文件名
        link.download = '碑帖资源模板.zip'; // 替换为你想要的文件名

        // 模拟点击下载链接
        link.click();
      },
      beforeZipUpload(file){
        const maxSize = 300 * 1024 * 1024; // 300MB
        if (file.size > maxSize) {
          this.$message.error('文件尺寸超过限制，请选择不超过300MB大小的Zip文件');
          return false; // 阻止上传
        }
        this.$message.info('文件上传中！');
        return true; // 允许上传
      },
      handleZipSuccess(){
      // 处理上传成功的逻辑
          this.$message.success('文件上传成功！');
      },
      handleZipError(){
      // 处理上传成功的逻辑
      this.$message.error('文件上传失败！');
      }
    },

  };
</script>
<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  .listitem {
    background-image: url('../../../../assets/img/mizige.png');
    background-size: cover;
    width: 148px;
    height: 148px;
    display: inline-block;
    cursor: pointer;
    position: relative;
  }

  .listitemofi {
    position: absolute;
    top: 74px;
    left: 74px;
    margin-top: -15px;
    margin-left: -15px;
  }

  .imgSty {
    width: 148px;
    height: 148px;
  }

  .delIcon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 40px;
  }

  .uploadIcon {
    margin-left: 40px;
  }

  .motaikuang {
    width: 150px;
    height: 150px;
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
  }

  .delIcon {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 40px;
    cursor: pointer;
  }
</style>
